<template>
    <div class="search">
        <div v-if="isSearchAll">
            <div class="c-item">
                <p class="title" style="width:100px">单位名称</p>
                <p class="name" @click="companyPropShow = true"><input class="bn" readonly v-model="DeptName" type="text" style="padding-right:20px;"><x-icon type="ios-arrow-right" size="20" style="fill:#c8c8cd;"></x-icon></p>
            </div>
            <div class="c-item" v-if="!isReport">
                <p class="title">人员状态</p>
                <div class="name">
                    <group>
                        <popup-picker :data="employeeList" v-model="employeeStatus" @on-change='changeEmployeeStatus' placeholder="请选择人员状态"></popup-picker>
                    </group>
                </div>
            </div>
            <div class="c-item">
                <p class="title">姓名</p>
                <div class="name">
                    <input  class="bn" type="text" v-model="searchInfo.name" placeholder="点击输入">  
                </div>
            </div>
            <div class="btns">
                <div class="submit" @click="searchAll">查询</div>
            </div>
        </div>
        <div v-if="!isSearchAll">
            <input type="text" v-model="value" @input="change" placeholder="输入您要查询的关键字">
            <button @click="search"></button>
        </div>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompanyTeam"></companyProp>
    </div>
</template>

<script>

import companyProp from '@/commonComponents/companyProp'
export default {
    name: 'search',
    data () {
        return {
            employeeStatus: ['已进场'],
            employeeList: [['已进场', '已退场']], // 人员进退场状态
            companyPropShow: false,
            DeptName: '',
            userInfo: {},
            searchInfo: {
                name: '',
                employeeStatus: '',
                deptName: '',
                deptId: ''
            }, // 查询相关信息
            isJustSearch: true, // 是否仅仅是搜索
            value: '' // 搜索框输入内容
        }
    },
    components: {
        companyProp
    },
    props: {
        isSearchAll: {
            default: false
        },
        isReport: {
            default: false
        }
    },
    methods:{
        search () {
            this.$emit('search', this.value)
        },
        searchAll () {
            this.$emit('searchAll', this.searchInfo)
        },
        selectCompanyTeam (item) {
            console.log(item)
            this.searchInfo.deptName = this.unescape(item.UnitName)
            this.DeptName = this.unescape(item.UnitName)
            this.searchInfo.deptId = item.UnitId
            this.companyPropShow = false
            this.searchAll()
        },
        change () {
            console.log('object');
            this.value = this.value.replace(/(^\s*)|(\s*$)/g, "")
        },
        // 切换人员状态
        changeEmployeeStatus (val) {
            console.log(val)
            this.employeeStatus[0] = val[0]
            this.searchInfo.employeeStatus = val[0]
        },
        //特殊字符转化
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        }
    },
    mounted () {
        let userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.DeptName = this.unescape(userInfo.departName)
        this.searchInfo.employeeStatus = this.employeeStatus[0]
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.DeptName = this.unescape(this.userInfo.departName)
    }
}
</script>

<style lang="less" scoped>
    .search {
        width: 100%;
        padding: 10px 20px;
        position: relative;
        background-color: #fff;
        input {
            width: 100%;
            height: 36px;
            border: 1px solid #eee;
            border-radius: 8px;
            padding-left: 10px;
            &.bn {
                border: none;
            }
        }
        button {
            width: 48px;
            height: 28px;
            background: url('../../assets/search.png') no-repeat center;
            background-size: 28px 28px;
            position: absolute;
            top: 14px;
            right: 30px;
        }
        .btns {
                width: 100%;
                display: flex;
                justify-content: center;
                background-color: #fff;
                .save, .submit {
                    width: 150px;
                    height: 30px;
                    line-height: 30px;
                    border-radius: 15px;
                    text-align: center;
                    color: #fff;
                    background-color: #2269FC;
                }
                padding-top: 10px;
                padding-bottom: 0;
            }
        .c-item {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f3f3f3;
            background-color: #fff;
            &.auto {
                height: auto;
                position: relative;
                width: 100%;
                .name {
                    right: 0;
                }
            }
            .name {
                text-align: right;
                color: #999;
                position: relative;
                svg {
                    position: absolute;
                    // right: 15px;
                    right: -5px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                &.auto {
                    max-width: 180px;
                    height: auto;
                    line-height: normal;
                    padding: 5px 0;
                    float: right;
                    textarea {
                        border: none;
                        text-align: right;
                        font-size: 14px;
                    }
                }
                .inline-x-switch {
                    top: 9px
                }
                .weui-switch:checked {
                    border-color: #2269FC;
                    background-color: #2269FC
                }
                input {
                    text-align: right;
                    color: #999;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-ms-input-placeholder { /* Internet Explorer 10+ */
                        direction: rtl;
                        font-size: 16px;
                    }
                }
            }
            .title {
                .red {
                    color: red;
                }
            }
        }
        
    }
</style>
<style lang="less">
 .search {
    .name {
        div:first-of-type {
            height: 100%;
        }
        .weui-cells {
            height: 100%;
            margin-top: 0 !important;
            &::before, &::after {
                border: none;
            }
            .weui-cell {
                padding-right: 0;
                .weui-cell__ft {
                    height: 30px;
                    .vux-number-selector {
                        &.vux-number-selector-plus {
                            margin-right: 0;
                        }
                        height: 100%;
                        background-color: #DAE6FE;
                        svg {
                            fill: #2269FC;
                        }
                    }
                    .vux-cell-value {
                        height: 100%;
                        display: inline-block;
                        padding-top: 5px;
                    }
                    .vux-number-input {
                        height: 100%;
                        font-size: 16px !important;
                    }
                }
            }
        }
    }
 }
 
.vux-popup-dialog {
    height: 300px !important;
}
.weui-dialog__btn_primary {
    color: #2269FC;
}
.weui-dialog__btn {
    font-size: 16px;
}
</style>